﻿body {
	background:url('../images/wrapperbg.png') no-repeat; /* Background image of page */
    height: 640px; /* Height of image */
}

#wrapper {
	width:950px; /* width of the wrapper that holds all content */
    margin-top: 3%; /* margin from top of page */
	margin-left: 25%; /* margin from left of page */
    margin-right: 50%; /* margin from right of page */
    height: 637px; /* Height of wrapper that holds all content */
    border: 30px solid yellow; /* border around the wrapper */
    padding: 0px 6px 6px 0px; /* how big the border is */
    background-color: #9FB2C1; /* blue color for border */
    /* defines the border, solid, color and how big it is and rounded corners */
    border-top-width: 2px;
    border-right-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 2px;
    border-style: solid;
    border-color: #082F70;
    border-top-left-radius: 2% 2%;
    border-bottom-right-radius:  2% 2%;
    border-bottom-left-radius:  2% 2%;
    border-top-right-radius:  2% 2%;
    padding: 0; /* no padding */
    overflow: auto; /* Makes the content able to overflow, which provides a scrollbar if needed */
}

#header {
	background:url(../images/header.png); /* header background */
	width: 100%; /* Cover 100% of wrapper horizontal */
	height: 200px; /* 200px of wrapper vertically */
}

#sidepanel {
	width: 35%; /* width procentage of wrapper div */
    height: 418px; /* height of wrapper div */
	float: right; /* float right of wrapper */
    background:url(../images/sidebg.png); /* background image for the sidepanel */
	}

#background {
    background-image:url('../images/homescreen.png'); /* background image for the content div */
    height: 417px; /* height of wrapper div */
    width: 617px; /* width of wrapper div */
    overflow:auto; /* makes the content able to overflow, which provides a scrollbar if needed */
}

#footer {
	width: 100%; /* width procentage of wrapper div */
	background-color: #c3c3c3; /* color grey */
	}

.logo {
    left: 28%; /* margin from left according to header div */
    top: 8.5%; /* margin from top according to header div */
    position:absolute; /* position absolute according to parent div */
}

/*NAVIGATION OF INFORMATION LINKS EXPLAINED IN CONTENTPAGE.CSS*/
ul {
    margin: 0; 
    padding: 0; 
}
 
ul.menu {
    height: 80px; 
    border-left: 1px solid rgba(0,0,0,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
    float:left; 
}
 
ul.menu li {
    list-style: none; 
    float:left;
    height: 79px; 
    text-align: center;
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
    }
 
ul.menu li a {
    display: block;
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    line-height: 79px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    -webkit-transition-property: background;
    -webkit-transition-duration: 700ms;
    -moz-transition-property: background;
    -moz-transition-duration: 700ms;
     text-decoration: none;
      color:#000000; 
    }

 ul.menu li a:visited {
     text-decoration: none;
      color:#000000; 
    }

ul.menu li a:hover {
    background: transparent none;
     color:blue; 
}
 
ul.menu li.active a{
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}

.wrappernav {
    width: 21.7%;
    height: 80px;
    top: 8%;
    right: 45.5%;
    position:absolute;
    background : #464646;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    border-top: 2px solid #939393;
    margin-bottom: 30px;

}

#nav {
	width: 51%;
    height:15%;
	float: left;
	margin-top: 15%;
    margin-left: 15%;
	padding: 0;
	list-style: none;
	background-color: #f2f2f2;
	border-bottom: 1px solid #ccc; 
	border-top: 1px solid #ccc; 
}

    #nav li {
    float: left;
    }

    #nav li a {
	display: block;
	padding: 8px 15px;
	text-decoration: none;
	font-weight: bold;
	color: #069;
	border-right: 1px solid #ccc; }

#nav li a:hover {
	color: #c00;
	background-color: #fff; }

#menu {
    width:100%;
    height: 20%;
}

.facebookbutton {
    margin-left: 15%;
    margin-top: 5%;
    z-index: 1;
}

.twitterbutton {
    margin-left: 15%;
    margin-top: 2%;
    z-index: 1;
}

.registerbutton {
    max-width: 50%; /* max and min height and width in % to make sure its the same according to diffrent resolutions */ 
    max-height: 13%;
    min-height:13%;
    min-width: 50%;
    margin-left: 25%;
    margin-top: 55%;

	-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7; /* Using CSS3 to create shadow inside the button */
	-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7; /* Using CSS3 to create shadow inside the border of the button */
	box-shadow:inset 0px 1px 0px 0px #bbdaf7; /* part of the shadowing */  
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
	background-color:#79bbff; /* background color of button */
	-moz-border-radius:13px; /* Using moz-border-radius to define how round the corners of the button should be */
	-webkit-border-radius:13px; /* Using webkit-border-radius to define how round the corners of the button should be */
	border-radius:26px; /* how big the border should be */
	border:4px solid #566c82; /* soild border and color of the border */
	display:inline-block; /* order all elemets of button in a block display */
	color:#ffffff; /* text color white */
	font-family:arial; /* use this font */
	font-size:20px; /* size of font */
	font-weight:bold; /* make text bold  */
	padding:6px 24px; /* padding defines the size of the box around the text, increasing the first px value will make the button grow bigger vertical and the other one horizontal  */
	text-decoration:none; /* no decoration such as overline,underline,strike through */
	text-shadow:79px; /* Shadow on text, first px is horizontal, second vertical, third is the blur and the fourth value is the color of shadow */
    z-index: 2; /* z index to indicate placement on top of other content  */
}

.registerbutton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );  /* Using -webkit-gradient to separate the background into two background colors for chrome */
	background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ); /* Using moz gradient to separate the background into two background colors for mozilla */
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); /* gradient used for internet explorer */
	background-color:#378de5; /* default background color */
}

.registerbutton:active {
}

.loginbutton {
    max-width: 15%; /* max and min height and width in % to make sure its the same according to diffrent resolutions */
    max-height: 20%;
    min-height: 20%;
    min-width: 15%;
    margin-left: 80%;
    margin-top: 4.5%;
    -moz-box-shadow: inset 0px 1px 0px 0px #bbdaf7; /* Using CSS3 to create shadow inside the button */
    -webkit-box-shadow: inset 0px 1px 0px 0px #bbdaf7; /* Using CSS3 to create shadow inside the border of the button */
    box-shadow: inset 0px 1px 0px 0px #bbdaf7; /* part of the shadowing */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
    background-color: #79bbff; /* background color of button */
    -moz-border-radius: 13px; /* Using moz-border-radius to define how round the corners of the button should be */
    -webkit-border-radius: 13px; /* Using webkit-border-radius to define how round the corners of the button should be */
    border-radius: 26px; /* how big the border should be */
    border: 4px solid #566c82; /* soild border and color of the border */
    display: inline-block; /* order all elemets of button in a block display */
    color: #ffffff; /* text color white */
    font-family: arial; /* use this font */
    font-size: 20px; /* size of font */
    font-weight: bold; /* make text bold  */
    padding: 6px 24px; /* padding defines the size of the box around the text, increasing the first px value will make the button grow bigger vertical and the other one horizontal  */
    text-decoration: none; /* no decoration such as overline,underline,strike through */
    text-shadow: 79px; /* Shadow on text, first px is horizontal, second vertical, third is the blur and the fourth value is the color of shadow */
    z-index: 2; /* z index to indicate placement on top of other content  */
}

.loginbutton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );  /* Using -webkit-gradient to separate the background into two background colors for chrome */
	background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ); /* Using moz gradient to separate the background into two background colors for mozilla */
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); /* gradient used for internet explorer */
	background-color:#378de5; /* default background color */
}

.loginbutton:active {
}

/*TEXTBOXES*/
.passbox {
    min-width: 6%; /* minimum width */
    max-width: 6%; /* max width */
    margin-top: 3.5%; /* margin from top of div */
    margin-left: 32%; /* margin from left of div */
    position:absolute; /* position absolute according to parent div */
}

.userbox {
    min-width: 6%; /* minimum width */
    max-width: 6%; /* max width */
    margin-top: 2%; /* margin from top of div */
    margin-left: 32%; /* margin from left of div */
    position:absolute; /* position absolute according to parent div */
}

h3 {
   margin-top: -60%; /* margin from top of div */
   margin-left: 4%; /* margin from left of div */
   font-weight:bold; /* bold text */
   color: #9A9A9A; /* use this color on text */
   text-shadow: 0 0 0.2em black, 0 0 0.2em #87F,0 0 0.2em #87F; /* apply shadow effect on text */
   font-style:oblique; /* slichtly cursive style on text */
   letter-spacing:0pt; /* no space between letters */
   word-spacing:2pt; /* 2pt between words */
   font-size:128%; /* use this font size */
   text-align:left; /* allign text to the left */
   font-family:trebuchet MS, sans-serif; /* use this font */
   line-height:1; /* height of text */
}
